<template>
    <div>
        <div>
            <ul>
                <li v-for="item in formatSongs.slice(0, songsEnd)"
                    :key="item.id"
                    @dblclick="chooseSongPlay(item)">
                    <template v-if="songs.type === SongListType">
                        <SongItem :music-detail="item" :is-can-show-bg="true"/>
                    </template>
                    <template v-if="songs.type ===AlbumType">
                        <AlbumSongItem :music-detail="item"/>
                    </template>
                </li>
            </ul>
        </div>
        <div v-show="formatSongs.length >= limit && songsEnd < formatSongs.length">
            <MyButton @click.native="loadMoreSongs">加载更多</MyButton>
        </div>
    </div>
</template>

<script>
import SongItem from "@/minicomponents/SongItem.vue";
import AlbumSongItem from "@/minicomponents/AlbumSongItem.vue";
import {SHOWITEMBG, TYPEOFSONGLIST, TYPEOFALBUM} from "@/http/constant";
import {mapMutations} from "vuex";
import MyButton from "@/minicomponents/MyButton.vue";

export default {
    name: "SongList",
    components: {MyButton, AlbumSongItem, SongItem},
    data() {
        return {
            formatSongs: [],
            limit: 30,
            offset: 0,
        }
    },
    methods: {
        ...mapMutations(['ShowBottomPlayer']),
        // 选择音乐播放
        chooseSongPlay(song) {
            this.$store.dispatch('updatePlaySongList', {
                // 选择播放的音乐id
                songId: song.id,
                isUpdatePlayingList: String(this.songs.listId) !== String(this.$store.state.playingSongList.id)
            })
            // 固定该列表项的背景
            this.$bus.$emit(SHOWITEMBG, {
                id: song.id
            })
            // 显示底部的音乐播放器
            this.ShowBottomPlayer(true)
        },
        loadMoreSongs() {
            this.offset += 1
        }
    },
    props: ['songs'],
    watch: {
        songs: {
            deep: true,
            immediate: true,
            handler(newVal) {
                if (newVal) {
                    // 歌单歌曲得格式化方式
                    this.formatSongs = newVal.allSong
                    // 直接提交给mutations存储下来即可用于播放的时候播放模式的选择
                    this.$store.commit('UpdateSongList', {
                        id: newVal.listId,
                        // 歌曲来源，4歌单，5专辑
                        listType: this.songs.type,
                        playList: this.formatSongs
                    })
                }
            }
        }
    },
    computed: {
        SongListType() {
            return TYPEOFSONGLIST
        },
        AlbumType() {
            return TYPEOFALBUM
        },
        songsEnd() {
            const {limit, offset} = this
            return limit * (offset + 1)
        }
    }
}
</script>

<style scoped lang="less">
</style>